/* eslint arrow-body-style: 0 */
import React from 'react'
import { Slider, WingBlank } from 'antd-mobile';
import "../assets/css/Slider/Slider.css"

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTime: '00:00'
    }
  }

  log = (name) => {
    return (value) => {
    };
  }


  afterChange() {
    return (value) => {
      let { listmusicindex, listmusic } = this.props
      // let second = Math.floor(listmusic[listmusicindex].dt/10/100*value/60)
      console.log(value)
      let second = Math.floor(listmusic[listmusicindex].dt/1000/100*value)
      console.log(second)
      // this.props.setsetcurrentTime(second)
    };
  }

  render() {
    let { listmusicindex, listmusic } = this.props
    // console.log(listmusic[listmusicindex])
    // 当前音乐总时间
    let totalTime = listmusic[listmusicindex].dt / 1000 / 60
    totalTime = isNaN(totalTime) ? null : totalTime
    if (totalTime) {
      // 获取总时长分钟数
      let minute = Math.floor(totalTime)
      minute = minute <= 9 ? "0" + minute : minute

      // 获取总时长秒钟数
      let second = String(totalTime).slice(2, 4)
      second = second.length === 0 ? "00" : second.length < 2 ? second + "0" : second

      // 拼接总时间
      totalTime = minute + ":" + second
    }

    return (
      <div className="am-slider-example">
        <WingBlank size="lg">
          <span className='Slider--timer Slider--currentTime'>{this.state.currentTime}</span>
          <Slider
            style={{ marginTop: 40, marginLeft: 120, marginRight: 120 }}
            defaultValue={0}
            min={0}
            max={100}
            onChange={this.log('change')}
            onAfterChange={this.afterChange()}
          />
          <span className='Slider--timer Slider--totaltimer'>{totalTime}</span>
        </WingBlank>
      </div>
    );
  }
}